<template>
<!--    在vue2 里面需要有外层div包裹html标签代码-->
  <div class="login_container">
    <vue-particles
      style="height: 100vh"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <!--    搞一个 div  去包裹图片和form 表单-->
    <div class="login_box">
      <!--   1.图片区域 他也需要一个div包起来   -->
      <div class="avatar_box">
        <!--        gif 动图-->
        <img src="../../assets/8d4fe3c4b6b039e23c4964315ecf573a.gif">
      </div>

       <!--  如果说在  el-form 加上:rules="xxx"  xxx需要在data()函数里面定义, :rules 需要和prop配合使用
         prop="名称" 名称登录 输入框里面v-model="名称" 保持一致.  如果名称不一样校验是没法生效
      -->
      <!--      2.form表单  el-form  饿了么vue 组件-->
      <el-form :model="loginForm" class="login_form" :rules="loginRules" ref="loginForm">
        <h2>强智教育管理系统</h2>
        <!--        1.用户名 -->
                <el-form-item prop="username">  <!-- 输入框是一组一组的,那么需要分组使用 el-form-item, v-model数据双向绑定 -->
          <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"
                    prefix-icon="el-icon-user-solid" clearable> </el-input>
        </el-form-item>
      <!--        账号对应的密码 show-password 可以查看密码 ,clearable可以清空输入里面的内容,
           prefix-icon 在输入框里面的最前面加上一个图标  -->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入账号密码"
          prefix-icon="el-icon-lock" show-password clearable></el-input>
        </el-form-item>

        <!--        3.图片 验证码的输入框 ,和图片[图片里面有数字]-->
        <el-form-item prop="verifyCode">
          <div class="verifyCode_box">
            <!-- 输入框 -->
            <el-input type="text" v-model="loginForm.verifyCode" class="verify_code"
                      prefix-icon="el-icon-picture" placeholder="请输入图片验证码/点击获取图片" clearable></el-input>
            <!-- 图片验证码-->
            <img :src="varifyImg" style="width: 30%;height: 39px;margin: 0 0 0 12px;justify-content: flex-end" @click="changeImg">
          </div>
        </el-form-item>

        <!--  4组,登录和重置按钮     @click  vue里面指令语法,点击事件 -->
        <el-form-item style="display: flex;justify-content: flex-end">
          <el-button type="primary" @click="submitForm('loginForm')"
                     @keyup.enter.native="submitForm('loginFrom')" plain><i :class="sub_mit"></i>登陆</el-button>
          <el-button type="info" @click="resetForm('loginForm')" plain><i :class="re_set"></i>重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!--    3.使用Vcode 组件代码
    :show  是否显示图片滑块,  boolean值:true,false
    @success="success"  函数 :拖动图片拼接成功,第一跳转到后台主页第二个隐藏图片滑块
    @close="close"  函数 :隐藏图片滑块
    canvasWidth :图片滑块的宽度
    canvasHeight: 图片滑块的高度
    -->
    <Vcode :show="isShow"  @success="success"  @close="close"
           :canvasWidth="400"  :canvasHeight="350"   class="login_box"  />
  </div>
</template>

<script>
// 1.导入图片滑块组件
import Vcode from 'vue-puzzle-vcode'
export default {
  name: 'Login',
  // 2.注册组件
  components:{
    Vcode
  },
  data () {
    return {
      // 调用java后台 获取图片验证,http://localhost:8989/captcha 直接返回图片
      varifyImg: 'http://127.0.0.1:8989/captcha?time='+new Date(),
      isShow: false,// 首次进入页面不需要弹图片滑块,但我们在输入正确的值,点击登录按钮需要将isShow改为true,滑块弹出
      sub_mit: 'el-icon-s-grid',
      re_set: 'el-icon-delete',
      // 在vue form 里面 使用 :model绑定 属性需要data函数中的return对象中去定义
      loginForm: {
        username: '',
        password: '',
        verifyCode: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '请输入长度为3到20位字符的用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户名对应的密码', trigger: 'blur' },
          { min: 3, max: 16, message: '请输入长度为3到16位的密码', trigger: 'blur' }
        ],
        verifyCode: [
          // required: true 必填项 , 当我们在输入没有输入值,的提示信息 , trigger:blur 触发条件:光标移开触发
          { required: true, message: '请输入图片验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeImg(){
      this.varifyImg = 'http://127.0.0.1:8989/captcha?time='+new Date()
    },
    // 但我们图片拼接完成之后调用success函数
    success(){
      this.$http.post('system/user/login',this.loginForm).then(res =>{
        if(res.data.success){
          this.$message({
            title:'登录成功提示',
            type:'success',
            message:"登录成功"
          })
          // 登录成功后 需要将 后台token保存LocalStrage对象,后面所有的请求都需要带着认证标识token
          LocalStorage.set(LOCAL_KEY_XINGUAN_ACCESS_TOKEN,res.data.data)
          //我们去获取用户信息
          this.getUserInfo();
        }else{
          // 登录失败,提示信息弹出框
          this.$message.error(res.data.data.errorMsg)
        }
      })

    },
    /* 点击登录按钮获取用户信息,采用异步请求的方式 */
    getUserInfo(){
       this.$http.get('system/user/info').then(res =>{
         console.log(res.data)  // 在F12控制台输出打印 用户信息
         if(res.data.success){ // 成功 获取用户信息
           // 需要将用户信息保存在本地存储空间里面
           LocalStorage.set("setUserInfo",res.data)
           // 跳转到DashBook.vue页面
           this.$router.push("/dashBook")
         }else{ // 获取用户信息 失败
           this.$message.error("获取用户信息失败:"+ res.data.errorMsg)
         }
       })
    },
    close(){
      // 1.图片滑块组件隐藏掉
      this.isShow = false
    },
    /**
     * 但我们点击登录和重置按钮时,他需要配合  ref 属性一起使用
     * ref 使用表单提交校验
     * ref 需要加在el-form标签上面
     *
     * */
    // 登录函数
    submitForm(formName){
      this.$refs[formName].validate((valid) =>{
        if (valid){
          this.isShow = true // 图片滑块弹出
          //弹窗  成功的提示
          this.$message.success("表单验证通过")
        }else{
          this.$message.error("用户名,密码,图片验证码为必填项!")
          return false;
        }
      })

    },
    // 重置表单函数
    resetForm(formName){
      // 重置表单 就是将输入框里面内容清空
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<!--样式 采用 less 去编译渲染-->
<style lang="less" scoped>
.login_container{
  height: 100%;
  background-color: #426fb9;
}
.login_box{
  width: 450px;
  height: 380px;
  background-color: #FFFFFF;
  border-radius: 10px; //弧形边框,四个角是弧形
  position: absolute;// 相对应html 给一个绝对定位
  left:50%;
  top: 50%;
  // 偏移
  transform: translate(-50%,-50%); //将相当于往左上角偏移50%
  // less 语法,  预编译语法
  .avatar_box{ //继承上一层div父类样式
    width: 120px;
    height: 120px;
    border: 1px solid #EEEEEE; // div 边框实心的  1像素 ,颜色为灰色.
    border-radius: 50%; // 圆形
    padding: 8px; //  给div 填充内边距
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0); // 阴影,倒影,投影
    margin: -65px auto;  //图片的上下 -65px 负的往上跑 ,左右自动适应,水平居中
    background-color: #FFFFFF;
    img{  //img 标签   img宽高是继承avatar_box类样式 = 120-8=112px
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #EEEEEE;
    }
  }
  .login_form{
    position: absolute;
    bottom: 1px;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
    .verifyCode_box{
      display: flex;
      .verify_code{
        width: 70%;
        justify-content: left;
      }
    }
  }
}
</style>
